import {
  formatTime
} from './tools'

let checkboxList = [{
  value: 0,
  label: '全选'
}, {
  value: 1,
  label: '选项1'
}, {
  value: 22,
  label: '选项2'
}, {
  value: 3,
  label: '选项3'
}]

let radioList = [{
  value: 1,
  label: '选项1'
}, {
  value: 22,
  label: '选项2'
}]

let selectList = checkboxList
/**
 * 1. type为表单子项类型
 * 2. label为表单子项label
 * 3. 表单提交参数为model
 * 4. 表单提交参数的key值为key
 * 5. 表单提交参数的value值为value
 * 6. 表单校验为rules（值为true时表示非空校验，值为Array时可自定义校验，否则不校验）
 * 7. 表单正则校验为pattern（与“rules:true”联合使用，rules为[...]时pattern无效）
 * 8. placeholder为表单placeholder
 * 9. disabled为表单禁用状态（Boolean）
 * 10. showType为表单显示状态（默认“edit”表示可编辑，为“view”时表示只做展示）
 *
 * 每个子项都有一个具名插槽：name为key
    <template #text="{info}" 或 v-slot:text="{info}">
      <Button size="small" type="primary" @click.prevent>{{info.label}}</Button>
    </template>
 * list 可以为MAP对象、数组
 *
 */

//  常用表单
export const basicInfos = [{
  type: 'switch',
  label: 'switch',
  key: 'switch',
  value: true
}, {
  type: 'menu',
  label: 'menu模糊查询',
  key: 'menu',
  value: '',
  list: checkboxList
}, {
  type: 'checkbox',
  label: '多选1',
  key: 'duoxuan1',
  value: true
}, {
  type: 'checkbox',
  label: '多选2',
  key: 'duoxuan2',
  list: checkboxList,
  checkedAll: 0,
  value: [1]
}, {
  type: 'checkbox',
  label: '多选3-view',
  key: 'duoxuan3',
  list: checkboxList,
  value: [1, 22],
  viewValueFn: v => `${v}（${v.join('~')}）`,
  showType: 'view'
}, {
  type: 'radio',
  label: '单选',
  key: 'danxuan',
  list: radioList,
  value: 1
}, {
  type: 'radio',
  label: '单选-view',
  key: 'danxuan',
  list: radioList,
  value: 1,
  viewValueFn: v => `${v}（注释：这里显示list里的label）`,
  showType: 'view'
}, {
  type: 'stepper',
  label: '进步器',
  key: 'jinbuqi1',
  value: 1
}, {
  type: 'stepper',
  label: '进步器-view',
  key: 'jinbuqi2',
  value: 5,
  viewValueFn: v => `${v}步`,
  showType: 'view'
}, {
  type: 'rate',
  label: '评分',
  key: 'pingfen1',
  value: 2
}, {
  type: 'rate',
  label: '评分-view',
  key: 'pingfen2',
  value: 3.5,
  showType: 'view'
}, {
  type: 'slider',
  label: '滑块',
  key: 'huakuai1',
  value: 50
}, {
  type: 'slider',
  label: '滑块-view',
  key: 'huakuai2',
  viewValueFn: v => `${v}%`,
  value: 60,
  showType: 'view'
}, {
  type: 'uploader',
  label: '上传',
  key: 'shangchuan',
  clickStop: true,
  value: [{
    url: 'https://img.yzcdn.cn/vant/leaf.jpg'
  }]
}, {
  type: 'uploader',
  label: '上传',
  key: 'shangchuan1',
  value: [{
    url: 'https://img.yzcdn.cn/vant/leaf.jpg'
  }]
}, {
  type: 'uploader',
  label: '上传-view',
  key: 'shangchuan2',
  value: [{
    url: 'https://img.yzcdn.cn/vant/leaf.jpg'
  }],
  showType: 'view'
}, {
  type: 'select',
  label: 'select下拉框',
  key: 'xialakuang1',
  arrow: 'right',
  labelWidth: 100,
  list: selectList
}, {
  type: 'select',
  label: 'view下拉框',
  key: 'xialakuang2',
  showType: 'view',
  value: 0,
  list: selectList
}, {
  type: 'picker',
  label: 'picker下拉框',
  key: 'xialakuang3',
  labelWidth: 100,
  value: 1,
  list: selectList
}, {
  type: 'picker',
  label: '多列下拉框',
  key: 'xialakuang4',
  arrow: 'right',
  value: ['周一', '上午'],
  list: [{
    values: ['周一', '周二', '周三', '周四', '周五'],
    defaultIndex: 2
  },
  {
    values: ['上午', '下午', '晚上'],
    defaultIndex: 1
  }
  ]
}, {
  type: 'picker',
  label: '多级下拉框',
  arrow: 'right',
  key: 'xialakuang5',
  value: ['浙江', '杭州', '西湖区'],
  list: [{
    text: '浙江',
    children: [{
      text: '杭州',
      children: [{
        text: '西湖区'
      }, {
        text: '余杭区'
      }]
    }, {
      text: '温州',
      children: [{
        text: '鹿城区'
      }, {
        text: '瓯海区'
      }]
    }]
  }, {
    text: '福建',
    children: [{
      text: '福州',
      children: [{
        text: '鼓楼区'
      }, {
        text: '台江区'
      }]
    }, {
      text: '厦门',
      children: [{
        text: '思明区'
      }, {
        text: '海沧区'
      }]
    }]
  }]
}, {
  type: 'datetime',
  label: '日期',
  arrow: 'right',
  key: 'riqi',
  value: new Date(),
  minDate: new Date(2020, 0, 1),
  maxDate: new Date(2025, 10, 1)
}, {
  type: 'datetime',
  label: '年月日',
  arrow: 'right',
  key: 'riqi2',
  value: new Date(),
  formatValue: 'YY-MM-DD',
  formatPicker: 'YY年MM月DD日'
}, {
  type: 'datetime',
  label: '年月',
  arrow: 'right',
  key: 'riqi3',
  value: new Date(),
  formatValue: 'YY/MM',
  formatPicker: 'YY年MM月'
}, {
  type: 'datetime',
  label: '月日',
  arrow: 'right',
  key: 'riqi4',
  value: new Date(),
  formatValue: 'MM月DD日',
  formatPicker: 'MM月DD日'
}, {
  type: 'datetime',
  label: '日期时间',
  arrow: 'right',
  key: 'riqi5',
  value: new Date(),
  formatValue: 'YY/MM/DD HH:MM:SS',
  formatPicker: 'YYMMDD HH:MM:SS'
}, {
  type: 'datetime',
  label: '日期时间',
  arrow: 'right',
  key: 'riqi6',
  value: new Date(),
  formatValue: 'YY年MM月DD日 HH:MM:SS',
  formatPicker: 'YY年MM月DD日 HH:MM:SS'
}, {
  type: 'datetime',
  label: '时间',
  arrow: 'right',
  key: 'riqi7',
  value: formatTime(Date.now(), 'HH:MM'),
  formatValue: 'HH:MM',
  formatPicker: 'HH:MM'
}, {
  type: 'uploader',
  key: 'imgs',
  value: [],
  label: '上传图片',
  base64: true,
  uploadFn: () => {
    let res = new Promise(resolve => {
      setTimeout(
        () =>
          resolve({
            success: true,
            message: 'success!!!',
            data: {
              url: 'data:image/png;base64,' + 'iVBORw0KGgoAAAANSUhEUgAAAC8AAAAuCAYAAAC4e0AJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABnSURBVGhD7dmxDcAgDABBwzJhyzBmtoHGEkUGeCz9NXb5hTu39T4riuo5SzKe8r/5+eVymTlyOTwbivEU4ynGU4ynGE8xnmI8xXiK8RTjKcZTjKcYTzGeYjzFeIrxlNLxfsApxjMiNuvECkZnkue8AAAAAElFTkSuQmCC'
            }
          }),
        1000
      )
    })
    return res
  },
  rules: !true
}, {
  type: 'uploader',
  key: 'imgs2',
  value: [],
  label: '上传图片',
  uploadFn: () => {
    let res = new Promise(resolve => {
      setTimeout(
        () =>
          resolve({
            success: true,
            message: 'success!!!',
            data: {
              url: 'data:image/png;base64,' + 'iVBORw0KGgoAAAANSUhEUgAAAC8AAAAuCAYAAAC4e0AJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABnSURBVGhD7dmxDcAgDABBwzJhyzBmtoHGEkUGeCz9NXb5hTu39T4riuo5SzKe8r/5+eVymTlyOTwbivEU4ynGU4ynGE8xnmI8xXiK8RTjKcZTjKcYTzGeYjzFeIrxlNLxfsApxjMiNuvECkZnkue8AAAAAElFTkSuQmCC'
            }
          }),
        1000
      )
    })
    return res
  },
  rules: !true
}]

//  联动表单
export const linkingInfos = [{
  type: 'hr',
  label: 'switch-linking'
}, {
  type: 'switch',
  label: 'switch',
  key: 'switch',
  value: true
}, {
  label: '---switch',
  key: 'linkingswitch',
  disabled: false,
  linking: {
    key: 'switch',
    value: false,
    linkingType: 'disabled' // hidden disabled show
  },
  value: '联动switch为false时: disabled'
}, {
  type: 'hr',
  label: 'checkbox-linking'
}, {
  type: 'checkbox',
  label: '多选1',
  key: 'duoxuan1',
  value: true
}, {
  type: 'checkbox',
  label: '多选2',
  key: 'duoxuan2',
  list: checkboxList,
  checkedAll: 0,
  value: [1]
}, {
  label: '---duoxuan1',
  key: 'linkingduoxuan11',
  disabled: false,
  linking: {
    key: 'duoxuan1',
    value: false,
    linkingType: 'disabled'
  },
  value: '联动checkbox为false时: disabled'
}, {
  label: '---duoxuan2',
  key: 'linkingduoxuan21',
  linking: {
    key: 'duoxuan2',
    value: 3,
    linkingType: 'hidden'
  },
  value: '联动checkbox为选项3时: hidden'
}, {
  label: '---duoxuan2',
  key: 'linkingduoxuan22',
  disabled: false,
  linking: {
    key: 'duoxuan2',
    value: 22,
    linkingType: 'disabled'
  },
  value: '联动checkbox为选项2时: disabled'
}, {
  type: 'radio',
  label: '单选',
  key: 'danxuan',
  list: radioList,
  value: 1
}, {
  type: 'stepper',
  label: '进步器',
  key: 'jinbuqi',
  value: 1
}, {
  label: '---danxuan',
  key: 'linkingdanxuan1',
  linking: {
    key: 'danxuan',
    value: 1,
    linkingType: 'hidden' // hidden disabled show
  },
  value: '联动checkbox2: hidden'
}, {
  label: '---danxuan',
  key: 'linkingdanxuan2',
  disabled: false,
  linking: {
    key: 'danxuan',
    value: 1,
    linkingType: 'disabled' // hidden disabled show
  },
  value: '联动checkbox2: disabled'
}, {
  label: '---jinbuqi',
  key: 'linkingjinbuqi1',
  linking: {
    key: 'jinbuqi',
    value: 1,
    linkingType: 'hidden' // hidden disabled show
  },
  value: '联动checkbox2: hidden'
}, {
  label: '---jinbuqi',
  key: 'linkingjinbuqi2',
  disabled: false,
  linking: {
    key: 'jinbuqi',
    value: 1,
    linkingType: 'disabled' // hidden disabled show
  },
  value: '联动checkbox2: disabled'
}, {
  type: 'rate',
  label: '评分',
  key: 'pingfen1',
  value: 2
}, {
  type: 'slider',
  label: '滑块',
  key: 'huakuai1',
  value: 50
}, {
  type: 'uploader',
  label: '上传',
  key: 'shangchuan',
  clickStop: true,
  value: [{
    url: 'https://img.yzcdn.cn/vant/leaf.jpg'
  }]
}, {
  type: 'uploader',
  label: '上传',
  key: 'shangchuan1',
  value: [{
    url: 'https://img.yzcdn.cn/vant/leaf.jpg'
  }]
}, {
  type: 'select',
  label: 'select下拉框',
  key: 'xialakuang1',
  arrow: 'right',
  labelWidth: 100,
  list: selectList
}, {
  type: 'picker',
  label: 'picker下拉框',
  key: 'xialakuang3',
  labelWidth: 100,
  value: 1,
  list: selectList
}, {
  type: 'picker',
  label: '多列下拉框',
  key: 'xialakuang4',
  arrow: 'right',
  value: ['周一', '上午'],
  list: [{
    values: ['周一', '周二', '周三', '周四', '周五'],
    defaultIndex: 2
  },
  {
    values: ['上午', '下午', '晚上'],
    defaultIndex: 1
  }
  ]
}, {
  type: 'datetime',
  label: '年月日',
  arrow: 'right',
  key: 'riqi2',
  value: new Date(),
  formatValue: 'YY-MM-DD',
  formatPicker: 'YY年MM月DD日'
}, {
  type: 'datetime',
  label: '月日',
  arrow: 'right',
  key: 'riqi4',
  value: new Date(),
  formatValue: 'MM月DD日',
  formatPicker: 'MM月DD日'
}, {
  type: 'datetime',
  label: '时间',
  arrow: 'right',
  key: 'riqi7',
  value: formatTime(Date.now(), 'HH:MM'),
  formatValue: 'HH:MM',
  formatPicker: 'HH:MM'
}]

// input组件
export const inputInfos = [{
  type: 'input', // 普通的input框
  label: 'input',
  key: 'input',
  value: 'input',
  rules: true
}, {
  type: 'text', // 普通的input框
  label: 'text',
  key: 'text',
  value: ''
}, {
  type: 'password', // 密码input框
  label: 'password',
  key: 'password',
  value: '123456'
}, {
  type: 'digit', // 调起手机号键盘input框
  label: 'digit',
  key: 'digit',
  value: '123456'
}, {
  type: 'number', // 调起带符号的纯数字键盘input框
  label: 'number',
  key: 'number',
  value: '123456'
}, {
  type: 'input', // 纯显示的input框
  showType: 'view',
  label: 'inputView',
  key: 'inputView',
  value: Date.now()
}]

// hr组件
export const hrInfos = [{
  type: 'hr',
  label: 'algin:left时左对齐'
}, {
  type: 'hr',
  label: 'dashed:true时虚线',
  dashed: true
}, {
  type: 'hr',
  label: '普通input输入框'
}]

// slot插槽
export const slotInfos = [{
  type: 'slot', // 自定义插槽（van-switch）
  label: 'slot1开关',
  key: 'slot1',
  value: true,
  rules: true
}, {
  type: 'slot', // 自定义插槽（van-checkbox-group）
  label: 'slot2多选',
  key: 'slot2',
  value: ['1'],
  rules: true
}, {
  type: 'slot', // 自定义插槽（van-radio-group）
  label: 'slot3单选',
  key: 'slot3',
  value: '1',
  rules: true
}, {
  type: 'slot', // 自定义插槽（van-stepper）
  label: 'slot4进步器',
  key: 'slot4',
  value: 1,
  rules: true
}, {
  type: 'slot', // 自定义插槽（van-rate）
  label: 'slot5评分',
  key: 'slot5',
  value: 3,
  rules: true
}, {
  type: 'slot', // 自定义插槽（van-slider）
  label: 'slot6滑块',
  key: 'slot6',
  value: 50,
  rules: true
}, {
  type: 'slot', // 自定义插槽（van-uploader）
  label: 'slot7上传',
  key: 'slot7',
  value: []
}, {
  type: 'slot', // 自定义插槽（van-uploader）
  label: 'slot8Picker',
  key: 'slot8',
  value: '北京',
  list: ['北京', '上海'],
  show: false,
  rules: true
}]

export const infos = [{
  type: 'hr',
  label: '基本表单'
},
...basicInfos, {
  type: 'hr',
  label: 'input表单'
},
...inputInfos, {
  type: 'hr',
  label: 'hr表单'
},
...hrInfos, {
  type: 'hr',
  label: '插槽'
},
...slotInfos
]
